<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08_DOM事件监听</title>
</head>
<body>
<button onclick="alert('点击了1')">按钮1</button>
<button id="btn">按钮2</button>
<h4>震惊:居然发生了这种事...</h4>
<div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aperiam blanditiis consequatur dicta dolore est
        hic illo, itaque nam neque repellendus sequi sint sit soluta velit? Dolorem facere officiis optio?
    </div>
    <div>Alias aliquam aperiam corporis cupiditate ducimus error ex fuga ipsa, libero, necessitatibus numquam possimus
        ratione repudiandae vel voluptatum? Illo ipsam iste itaque labore maiores, odit quidem quod similique tempora
        ut!
    </div>
    <div>Alias at beatae consequuntur distinctio dolor ducimus eaque et explicabo fugit id illum magnam maxime molestiae
        molestias nemo, reprehenderit rerum sed ullam voluptate voluptatibus. Deserunt iste laboriosam maiores nihil
        praesentium?
    </div>
    <div>Dignissimos eaque exercitationem fuga illum ipsa nihil possimus quia reprehenderit. Amet animi, dolorum ea
        error magni natus, necessitatibus nemo odio optio perspiciatis ratione, repudiandae tempore tenetur! Asperiores
        distinctio natus quam?
    </div>
    <div>A ad adipisci dicta exercitationem harum inventore laudantium magnam molestiae non odit, officia porro sint sit
        sunt temporibus veritatis vero. Autem commodi consequuntur cumque delectus ipsa, itaque officia possimus rem.
    </div>
    <div>Accusamus aperiam asperiores assumenda atque autem delectus, doloremque dolorum impedit labore libero magni
        necessitatibus omnis perspiciatis quam qui repellat rerum sequi soluta, tempore unde velit, veritatis
        voluptatum! Eligendi, quasi quia.
    </div>
    <div>Ab aperiam atque dicta distinctio earum eius laudantium libero modi nisi, optio placeat porro quam quibusdam
        rem saepe sint, suscipit tenetur unde vitae voluptatem! Debitis officiis quo quod reprehenderit voluptas!
    </div>
    <div>Alias aliquam animi atque aut blanditiis consequuntur dignissimos dolorum ex expedita explicabo fugit illum
        incidunt, ipsam maiores necessitatibus obcaecati quidem quo reprehenderit rerum, sapiente sed sit ullam velit
        vero voluptatem?
    </div>
    <div>Doloribus, eveniet, nisi! Ad corporis esse est explicabo itaque laboriosam libero nemo, officia perspiciatis,
        possimus repudiandae similique suscipit ut voluptate voluptatum? A ad eius id iusto maxime obcaecati ullam
        voluptatem.
    </div>
    <div>Adipisci itaque magnam provident ut. Atque consequatur, consequuntur cum delectus ea, ex exercitationem,
        expedita explicabo facilis ipsam laborum molestias nam necessitatibus optio ratione repudiandae saepe sit sunt
        voluptate voluptates? Quo.
    </div>
    <div>Ab, architecto incidunt magni porro quis rem veritatis vitae. Amet aspernatur delectus eligendi libero
        quibusdam quisquam saepe tempore! Architecto eaque facere laborum, libero maxime mollitia officia repellendus
        soluta tenetur. Similique!
    </div>
    <div>Amet beatae corporis libero. Animi aut consequuntur deleniti dignissimos facere harum maiores repellat tempore
        temporibus voluptates. Amet aperiam et incidunt ipsum laborum non omnis, quas quasi quidem, reprehenderit
        sapiente voluptate.
    </div>
    <div>Commodi inventore ipsam molestias quos rerum vel vero voluptatum! Amet corporis ducimus eos, et eveniet
        incidunt maiores, nam odit provident quas temporibus vel voluptate voluptates! Beatae blanditiis debitis minima
        nisi.
    </div>
    <div>Accusantium aperiam beatae eaque earum, error ex exercitationem harum ipsam magni minus nemo optio pariatur
        perferendis, placeat possimus quis ullam ut, vel voluptatem voluptates? At deleniti facere fuga nesciunt qui?
    </div>
    <div>Fuga, porro sed? Ab adipisci cupiditate error et incidunt maxime numquam perspiciatis quibusdam repellendus sed
        sequi sit voluptate, voluptatem. A aperiam cupiditate dignissimos dolor, in laudantium perferendis quo sequi
        vitae.
    </div>
    <div>Consequatur cumque, possimus. Aperiam consequatur cum delectus deserunt ducimus ea ex explicabo facere ipsa
        labore laboriosam libero natus perspiciatis, placeat quaerat quibusdam quidem repellat, sit temporibus veniam
        veritatis voluptas voluptatem!
    </div>
    <div>In, nam, velit! Asperiores culpa error esse eum, harum laboriosam molestias provident quaerat quisquam saepe
        tenetur, ut? Consectetur consequatur deserunt distinctio dolores excepturi ipsum nesciunt odio reprehenderit sit
        totam! Aliquid?
    </div>
    <div>Ab aperiam autem commodi distinctio doloremque dolorum earum eligendi est fugit inventore ipsam maxime minus
        nam natus nemo nulla obcaecati officia quaerat quam quis, recusandae sed sequi, sunt veniam voluptates?
    </div>
    <div>Architecto consequuntur dolor dolores doloribus eius enim error fuga id, laudantium maxime natus omnis
        provident quos repellat rerum sed tempora veniam voluptate. Debitis delectus, dolor nulla odit qui voluptate
        voluptatibus.
    </div>
    <div>Accusantium aut culpa deserunt eligendi voluptates? A ab aliquam ea eum facere incidunt, labore maiores minima
        placeat quaerat quam quis quod suscipit? Autem expedita quae quaerat quibusdam quod sint suscipit?
    </div>
</div>

<script>
    //alert是阻塞方法
    window.addEventListener('resize',function () {
        alert('窗口被改变了');
    });
    window.addEventListener('scroll',function () {
        alert('窗口滚动了');
    });
    let h4E = document.querySelector('h4');
    h4E.addEventListener('mouseover',function (){
        console.log('标题被查看了');
    });
    // window.addEventListener('mouseover',function (){
    //     console.log('标题被查看了');
    // });
    document.getElementById('btn').addEventListener('click',function (){
        alert('点击了!2');
    });
    // window.addEventListener('click',function (){
    //     alert('点击了!2');
    // });
</script>
</body>
</html>